<template>
	<view>
		<uni-nav-bar @clickRight='openAdd' :statusBar='true' class="navbar" :fixed='true'>
			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left">
					<view class="icon iconfont iconqiandaoicon"></view>
				</view>
			</block>
			<!-- 中间 -->
			<view class="nav-tab-bar">
				<block v-for="(item,index) of tabBars" :key='index'>
					<view :class="{'active':tabIndex===item.id}" @click="tabClick(item.id)">
						{{item.text}}
					</view>
				</block>
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right">
					<view class="icon iconfont iconjibiji"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		props:{
			tabBars:{
				type:Array,
				default(){
					return []
				}
			},
			tabIndex:{
				type:Number,
				default(){
					return 0
				}
			}
		},
		methods:{
			openAdd() {
				uni.navigateTo({
					url: '../app-input/app-input'
				})
			},
			tabClick(index) {
				this.$emit('TabClick',index)
			},
		},
		components:{
			uniNavBar
		}
	}
</script>

<style scoped>
	.nav-left,
	.nav-right {
		width: 100%;
	}
	
	.nav-left .iconfont {
		font-size: 24px;
		margin-left: -1px;
		margin-top: -4px;
		text-align: left;
		color: #FF9619;
	}
	
	.nav-right .iconfont {
		font-size: 22px;
		text-align: right;
		margin-right: -1px;
		margin-top: -3px;
	}
	
	.nav-tab-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-tab-bar view {
		font-size: 16px;
		margin: 0 5px;
		color: #969696;
		font-weight: bold;
		position: relative;
	}
	
	.nav-tab-bar view.active {
		color: #333333;
	}
	
	.nav-tab-bar view.active::after {
		content: '';
		position: absolute;
		bottom: 5PX;
		left: 0;
		right: 0;
		border-radius: 14px;
		height: 4px;
		background: #FEDE33;
	}
</style>
